<template>
    <div class="">
        <!-- 搜索 -->
        <el-card class="!border-none" shadow="never">
            <el-form ref="formRef" :model="queryParams" :inline="true">
                <!-- 名称 -->
                <el-form-item label="分类名称">
                    <el-input v-model="queryParams.type_name" placeholder="请输入名称" />
                </el-form-item>
                <!-- 分类 -->
                <el-form-item label="分类状态">
                    <el-select v-model="queryParams.status" placeholder="请选择状态">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <!-- 搜索操作 -->
                <el-form-item>
                    <el-button type="primary" :icon="Search" @click="resetPage">搜索</el-button>
                    <!-- <el-button @click="resetParams">重置</el-button> -->
                </el-form-item>
            </el-form>
        </el-card>
        <!-- 列表 -->
        <el-card class="!border-none mt-4" shadow="never">
            <!-- 新增 -->
            <div>
                <router-link
                    v-perms="[
                        'certificateList.certificateList/certificateAdd/add',
                        'certificateList.certificateList/certificateAdd/add:edit'
                    ]"
                    :to="{
                        path: getRoutePath(
                            'certificateList.certificateList/certificateAdd/add:edit'
                        )
                    }"
                >
                    <el-button type="primary" class="mb-4">
                        <template #icon>
                            <icon name="el-icon-Plus" />
                        </template>
                        新增
                    </el-button>
                </router-link>
            </div>
            <!-- 表格 -->
            <el-table size="large" :data="pager.lists" border="true">
                <!-- ID -->
                <el-table-column label="ID" prop="type_id" min-width="80" align="center" />
                <!-- 名称 -->
                <el-table-column label="名称" prop="type_name" min-width="80" align="center" />
                <!-- 状态 -->
                <el-table-column label="状态" prop="status" min-width="80" align="center">
                    <template #default="{ row }">
                        <el-tag
                            type="warning"
                            v-if="row.status == 0"
                            @click="centerDialog(row.status, row.type_id)"
                            >隐藏</el-tag
                        >
                        <el-tag
                            type="primary"
                            v-if="row.status == 1"
                            @click="centerDialog(row.status, row.type_id)"
                            >显示</el-tag
                        >
                    </template>
                </el-table-column>
                <!-- 排序 -->
                <el-table-column label="排序" prop="sort" min-width="80" align="center" />
                <!-- 添加时间 -->
                <el-table-column
                    label="添加时间"
                    prop="create_time"
                    min-width="80"
                    align="center"
                />
                <!-- 操作 -->
                <el-table-column label="操作" fixed="right" align="center">
                    <template #default="{ row }">
                        <el-button
                            v-perms="[
                                'certificateList.certificateList/certificateAdd/add',
                                'certificateList.certificateList/certificateAdd/add:edit'
                            ]"
                            type="primary"
                            link
                        >
                            <router-link
                                :to="{
                                    path: getRoutePath(
                                        'certificateList.certificateList/certificateAdd/add:edit'
                                    ),
                                    query: { id: row.type_id }
                                }"
                            >
                                编辑
                            </router-link>
                        </el-button>
                        <el-button type="danger" link @click="DeleteOpen(row.type_id)"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
        <!-- 弹窗 -->
        <el-dialog v-model="centerDialogVisible" title="修改状态" width="500" align-center>
            <view class="dialog">
                <el-radio-group v-model="status">
                    <el-radio :label="1">显示</el-radio>
                    <el-radio :label="0">隐藏</el-radio>
                </el-radio-group>
            </view>
            <template #footer>
                <div class="dialog-footer dialog">
                    <el-button @click="centerDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="preserve">保存</el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="centerDialogVisible1" title="删除分类" width="500" align-center>
            <view class="dialog"> 是否确认删除该分类? </view>
            <template #footer>
                <div class="dialog-footer dialog">
                    <el-button @click="centerDialogVisible1 = false">取消</el-button>
                    <el-button type="primary" @click="Delete(id)">删除</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup name="classificationLists">
import {
    // 列表接口
    classificationList,
    //删除接口
    classificationDelete,
    classUpdateStatus
} from '@/api/classification'
import { Search } from '@element-plus/icons-vue'
import { getRoutePath } from '@/router'
import feedback from '@/utils/feedback'
import { usePaging } from '@/hooks/usePaging'
const centerDialogVisible = ref(false)
const centerDialogVisible1 = ref(false)
const id = ref()
const status = ref()
const type_id = ref()
const centerDialog = (s: number, id: number) => {
    centerDialogVisible.value = true
    status.value = s
    type_id.value = id
}
const preserve = async () => {
    centerDialogVisible.value = false
    await classUpdateStatus({
        status: status.value,
        type_id: type_id.value
    })
    getLists()
}
const options = [
    {
        value: 2,
        label: '全部'
    },
    {
        value: 1,
        label: '显示'
    },
    {
        value: 0,
        label: '隐藏'
    }
]
const queryParams = reactive({
    type_name: '',
    status: 2
})

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: classificationList,
    params: queryParams
})

getLists()
const DeleteOpen = (bookId) => {
    id.value = bookId
    centerDialogVisible1.value = true
}
const Delete = async (id: number) => {
    await classificationDelete({
        type_id: id
    })
    centerDialogVisible1.value = false
    getLists()
}
</script>
<style scoped>
.dialog {
    margin: 0 30px;
}
</style>
